<template>
  <div class="demo">
    <div class="demo-title">渐进加载</div>
    <div class="demo-content">
      <Space :size="12">
        <Image
          :width="200"
          :src="`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`"
        >
          <template #placeholder>
            <Image
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
              :width="200"
              :preview="false"
            />
          </template>
        </Image>
        <Button type="primary" @click="random = Date.now()">reload</Button>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Space from '@sscd/space';
  import Button from '@sscd/button';
  import Image from '@sscd/image';
  const random = ref();
</script>
